import React, { Component } from 'react';
import {Modal,Form,Input,message} from 'antd';
import axios from 'axios';


export default class AddNorUser extends Component {
  formRef = React.createRef();//重置表单没有实现

 
  componentDidMount(){
  //   const list=useSelector(state=>state.list);
  //   const dispatch=useDispatch();//拿到派发源
  //   console.log(list);
  }


  cancelForm=()=>{
    this.formRef.current.resetFields();
  }
  
  

  handleSubmit=()=>{
   
    this.formRef.current.validateFields()
    .then(values=>{
      message.info('添加成功！');
      this.props.close();
      this.props.adduser(values);
      // axios.post("/list",values)
      //   .then(function(response){
      //     console.log(response);
      //   })
      //   .catch(err=>console.log(err))

      }).catch(errorInfo=>{
        console.log(errorInfo);
        message.error('添加失败！');
      })

     
  }


  render() {
    return (
      <Modal
          title='添加用户信息'
          okText='确定'
          cancelText='取消'
          visible={this.props.visible}
          onCancel={()=>{
            this.cancelForm();
            this.props.close()
            }
          }
        onOk={this.handleSubmit}>
          <Form 
            ref={this.formRef}
            layout="horizontal"
            labelCol={{span:4}}//不能超过24
            wrapperCol={{span:10}}>
              
            <Form.Item name="id" label='编号' 
            rules={[{
                    required:true,
                    message:'请输入编号',
                }]}>
              <Input placeholder='编号' />  
            </Form.Item>
                
            <Form.Item name="name" label='用户名' 
                rules={[{//pattern正则匹配，type选类型
                        pattern:/\w{4,20}/gi,
                        message:'请输入4-20个字符',
                    },
                    {
                        required:true,
                        message:'请输入用户名',
                    }]}>
              <Input placeholder='用户名' />  
            </Form.Item>
            <Form.Item name="openID" label='openID' 
                rules={[{
                        required:true,
                        message:'请输入openid',
                    }]}>
              <Input placeholder='openID' />  
            </Form.Item>
            <Form.Item name="phone" label='电话' 
                rules={[{
                        pattern:/\b1[358]\d{9}\b/g,
                        message:'请输入合法的电话号码',
                    },
                    {
                        required:true,
                        message:'请输入电话',
                    }]}>
              <Input placeholder='电话' />  
            </Form.Item>
          </Form>
      </Modal>
        

    );
  }
}



